import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Col, Row, message } from 'antd';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
// import AppState from '../store/app_state'
import User from '../store/user_store'
import logo from '../image/logo.png'
import UserModal from './user_modal';
import PcNav from './pc_nav';
import UserStatus from './user_status';
import { STORAGE } from '../util/comm';

const _storage = new STORAGE();

@inject((stores) => {
  const store = {
    userStore: stores.userStore,
  }
  return store
})
@observer
class PCHeder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: this.props.newsName,
      isLogin: false,
      modalVisible: false,
    }
    this.menuClick = this.menuClick.bind(this)
    this.doLogout = this.doLogout.bind(this)
    this.setModalVisibale = this.setModalVisibale.bind(this)
  }
  componentDidMount() {

  }
  // 设置modal是否可见
  setModalVisibale(status) {
    this.setState({
      modalVisible: status,
    })
  }
  // 退出登录
  doLogout() {
    this.props.userStore.doLogout();
    _storage.deleteStorage('ReactNews_UserInfo');
    message.success('退出成功');
    try {
      if (window.location.href.indexOf('user-center') !== -1) {
        this.props.history.push('/')
      }
    } catch (e) {

    }
  }
  // menu点击事件
  menuClick(type) {
    this.setState({
      current: type || '头条',
    })
  }
  render() {
    const { userInfo, isLogin } = this.props.userStore
    return (
      <header id="pc-header">
        <Row>
          <Col span={4} >
            <Link to="/" href="/" className="logo">
              <img src={logo} alt="logo" />
              <span>小白新闻</span>
            </Link>
          </Col>
          <Col span={14}>
            <PcNav current={this.props.newsName} menuChange={this.menuClick} />
          </Col>
          <Col span={6}>
            <UserStatus
              doLogout={this.doLogout}
              nickName={userInfo.nickName}
              userAction={() => this.setModalVisibale(!this.state.modalVisible)}
              isLogin={isLogin}
            />
          </Col>
        </Row>
        <UserModal
          modalVisible={this.state.modalVisible}
          setModalVisibale={() => this.setModalVisibale(!this.state.modalVisible)}
          doRegister={this.doRegister}
        />
      </header>

    )
  }
}
export default withRouter(PCHeder);

PCHeder.propTypes = {
  newsName: PropTypes.string,
  userStore: PropTypes.instanceOf(User),
  history: PropTypes.objectOf(Object),
}
